<script>
// 数据分析
export default {
  name: 'DataAnalysis',
  data() {
    return {
      drawType: 'rect',
    };
  },
  methods: {
    goBack() {
      this.$router.back(-1);
    },
  },
};
</script>
<template>
  <div class="analysis-host">
    <div class="analysis-header">
      <i>2</i>
      <div class="analysis-title">
        <h3>运行并集</h3>
        <p>设置模型参数，点击运行按钮，进行数据分析</p>
        <Button
          type="primary"
          @click="goBack()">
          <Icon type="chevron-left"></Icon>
          上一步
        </Button>
      </div>
    </div>
    <div class="analysis-content">
      <div class="analysis-form-host">
        <Card>
          <div class="analysis-form">
            <Form :label-width="80">
              <FormItem label="输入图层：">
                <Select>
                  <Option value="beijing">图层一</Option>
                  <Option value="shanghai">图层二</Option>
                  <Option value="shenzhen">图层三</Option>
                </Select>
              </FormItem>
              <FormItem label="叠加图层：">
                <Select>
                  <Option value="beijing">图层一</Option>
                  <Option value="shanghai">图层二</Option>
                  <Option value="shenzhen">图层三</Option>
                </Select>
              </FormItem>
              <FormItem label="操作类型：">
                <Select>
                  <Option value="beijing">交叉分析</Option>
                  <Option value="shanghai">叠加分析</Option>
                  <Option value="shenzhen">缓冲区分析</Option>
                </Select>
              </FormItem>
              <FormItem label="输出类型：">
                <Select>
                  <Option value="beijing">SHAPE</Option>
                  <Option value="shanghai">GDB</Option>
                  <Option value="shenzhen">MDB</Option>
                </Select>
              </FormItem>
              <FormItem label="计算模型：">
                <Select>
                  <Option value="beijing">全负载</Option>
                  <Option value="shanghai">网格</Option>
                  <Option value="shenzhen">邻域</Option>
                </Select>
              </FormItem>
              <FormItem label="绘制方式：">
                <RadioGroup v-model="drawType">
                  <Radio label="rect">矩形</Radio>
                  <Radio label="polygon">多边形</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem label="空间关系：">
                <Select>
                  <Option value="beijing">相交</Option>
                  <Option value="shanghai">相邻</Option>
                  <Option value="shenzhen">包含</Option>
                </Select>
              </FormItem>
              <FormItem :class="analysis-form">
                <Button type="primary">执行</Button>
                <Button
                  type="ghost"
                  @click="goBack">取消</Button>
              </FormItem>
            </Form>
          </div>
        </Card>
      </div>
    </div>
  </div>
</template>


<style lang="less">
.analysis-host {
  width: 100%;
  height: 100%;
  background-color: rgb(243, 243, 243);
}

.analysis-header {
  height: 100px;
  padding: 20px 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #dddddd;
  > i {
    float: left;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 25px;
    color: #ffffff;
    font-size: 20px;
    text-align: center;
    font-style: normal;
    background-color: rgb(64, 135, 248);
    margin: 0 0 0 15px;
  }
  .analysis-title {
    margin-left: 80px;
    position: relative;
    > p {
      margin-top: 5px;
    }
    .k-btn {
      position: absolute;
      top: 10px;
      right: 40px;
    }
  }
}

.analysis-content {
  .analysis-form-host {
    width: 600px;
    margin: 0 auto;
  }
  .analysis-form {
    width: 400px;
    margin: 10px auto;
    .k-btn {
      margin: 0 5px;
    }
  }
}
</style>
